<template>
  <div class="user-info">
    <van-nav-bar
      class="user-nav"
      title="编辑用户信息"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form @submit="onSubmit">
      <van-field v-model="userInfo.name" name="用户昵称" label="用户昵称" placeholder="用户昵称" />
      <van-field
        class="avatar-field"
        name="用户图像"
        label="用户图像"
        disabled
        clickable
        @click="$refs.uploadFile.click()"
      >
        <van-image slot="right-icon" round class="user-avatar" :src="img" />
      </van-field>
      <van-field
        v-model="userInfo.phone"
        type="number"
        name="电话号码"
        label="电话号码"
        placeholder="电话号码"
      />
      <van-field
        v-model="userInfo.position"
        rows="3"
        autosize
        label="用户住址"
        type="textarea"
        maxlength="50"
        placeholder="用户住址"
        show-word-limit
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <!-- 编辑头像 -->
    <van-popup v-model="isUpdatePhotoShow" position="bottom" style="height: 100%;">
      <user-avatar
        :img="cropperImg"
        @close="isUpdatePhotoShow = false"
        @update-photo="updatePhoto"
      />
    </van-popup>
    <!-- 上传文件组件 隐藏 -->
    <input ref="uploadFile" type="file" @change="uploadAvatar" hidden />
  </div>
</template>

<script>
import UserAvatar from './components/user-avatar'
import { updateUserInfo, getUser } from '@/api/user'
export default {
  name: 'UserInfo',
  components: {
    UserAvatar
  },
  data() {
    return {
      isUpdatePhotoShow: false,
      img: '',
      cropperImg: '',
      userInfo: {
        name: '',
        phone: '',
        position: '',
        photo: ''
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  mounted() {},
  methods: {
    async onSubmit() {
      this.$toast.loading({
        message: '提交中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await updateUserInfo(this.userInfo)
      if (res.meta.status === 200) {
        this.$toast.success('操作成功')
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    // 获取用户信息
    async getUserInfo() {
      const { data: res } = await getUser()
      if (res.meta.status === 200) {
        this.img = res.data.photo
        res.data.photo = ''
        this.userInfo = res.data
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    // 将图像传递到剪裁页面
    uploadAvatar() {
      const file = this.$refs.uploadFile.files[0]
      // this.img = window.URL.createObjectURL(file)
      this.cropperImg = window.URL.createObjectURL(file)
      // console.log(this.img)
      this.isUpdatePhotoShow = true
      // 上传同一个文件不会触发change事件，所以需要清空
      this.$refs.uploadFile.value = ''
    },
    // 将剪裁好的图像传过来
    updatePhoto(val) {
      this.isUpdatePhotoShow = false
      this.img = val
      this.userInfo.photo = val
    }
  }
}
</script>

<style scoped lang="less">
.user-info {
  /deep/.user-nav {
    background: #008bfa;
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-icon {
      color: #fff;
    }
  }
  .avatar-field {
    padding-top: 0;
    padding-bottom: 0;
    /deep/.van-field__label {
      span {
        line-height: 124px;
      }
    }
    /deep/.van-field__label {
      color: #646566;
    }
    /deep/.van-field__body {
      .van-field__right-icon {
        padding-top: 16px;
      }
    }
    .user-avatar {
      width: 94px;
      height: 94px;
      line-height: 94px;
    }
  }

  .van-cell {
    font-size: 30px;
  }
  // .user-avatar {
  //   position: relative;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  // }
}
</style>
